<template>
<view class="dm-radio-box margin-top-xs">
  <view class="label">{{label}}</view>
  <view class="options-box flex flex-wrap">
    <button class="cu-btn sm margin-xs" :class="curIndex === index ? 'line-orange' : 'line-gray' " v-for="(item, index) in options" :key="index" @tap="onSelect(index)" :disabled="disabled">{{item}}</button>
  </view>
</view>
</template>

<script>
export default {
  name: 'dmRadio',
  data () {
    return {
      curIndex: this.selected
    }
  },
  props: {
    target: {
      type: Object,
      default: () => {
        return {}
      }
    },
    label: {
      type: String,
      default: ''
    },
    options: {
      type: Array
    },
    selected: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onSelect(index) {
      this.curIndex = index
      this.target.selected = index
      this.$emit('onSelect', this.curIndex)
    }
  }
}
</script>

<style lang="less">
.dm-radio-box {
  width: 100%;
}
</style>
